<template>
  <div class="native">
    <div>
      <div>
        <tr class="navi_tr">
          <th  class="cell"><span >工号</span></th>
          <th class="name"><span >姓名</span></th>
          <th class="root"><span >角色</span></th>
          <th class="opration" ><span >操作</span></th>
        </tr>
      </div>
        <tr class="for_tr"  v-for="(item) of listTrans" :key="item._id">
          <td  class="tr_name">
            <div>
              <span>{{item.userId}}</span>
            </div>
          </td>
          <td  class="tr_name">
            <div>
              <span>{{item.name}}</span>
            </div>
          </td>
          <td class="tr_root">
            <div>
              <span ref="root">{{item.consumer}}</span>
            </div>
          </td>
          <td  class="tr_opration" >
            <el-button type='primary' v-show="item.consumer=='一般用户'" @click="item.consumer='管理员';changeRoot(item.consumer,item._id)" circle>设为管理员</el-button>
            <el-button v-show="item.consumer=='管理员'"  @click="item.consumer='一般用户';changeRoot(item.consumer,item._id)" circle>设为一般用户</el-button>
            <el-button type='success' v-show="item.consumer=='超级管理员'" circle>超级管理员</el-button>
          </td>
        </tr>
    </div>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="List.length"
        prev-text="上一页"
        next-text="下一页">
      </el-pagination>
    </div>
 </div>
</template>
<script>
import axios from "axios";
export default {
  name: "manageRole",
  mounted() {
    this.getUserList();
  },
  data() {
    return {
      List: [],
      //分页
      pageSize: 50,
      pageSizes: [8, 10, 50, 999],
      currentPage: 1
    };
  },
  computed: {
    listTrans() {
      this.List = this.List.sort(this.com.sortRole("userId"));
      return this.List.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    }
  },
  methods: {
    // sortRole (pro) {
    //   return function (a,b) {
    //     var value1 = a[pro];
    //     var value2 = b[pro];
    //     return value1 - value2;
    //   }
    // },
    getUserList() {
      axios.get("/users").then(res => {
        let _res = res.data;
        if (_res.status == "0") {
          this.List = _res.result.list;
        } else {
          this.List = [];
        }
      });
    },
    changeRoot(role, id) {
      let params = { id: id, role: role };
      axios.post("/users/updateRoles", params).then(res => {
        if (res.data.status == "0") {
          this.$message({
            type: "success",
            message: res.data.msg
          });
        } else {
          alert("系统异常！");
        }
      });
    }
  }
};
</script>
<style scoped>
.for_tr {
  font-size: 14px;
  line-height: 19px;
}
.for_tr td {
  border-bottom: 1px solid #ebeef5;
}
.tr_name,
.tr_root,
.tr_checkbox {
  padding: 12px 0;
  color: #606266;
  font-weight: 500;
  width: 150px;
}

.active {
  background-color: gainsboro;
}
.tr_delete {
  float: right;
  position: fixed;
}
.navi_tr > th {
  padding-top: 10px;
  color: #909399;
  font-weight: 1000;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.el-button + .el-button {
  margin-left: 0px;
}
.name {
  width: 250px;
}
.cell {
  width: 50px;
}
.opration {
  width: 350px;
}
.for_tr > td:hover {
  background-color: #ecf5ff;
}
.block {
  margin-top: 8px;
}
</style>
